<template>
  <div class="mid">
    <div v-if="productList.length" id="cart_index" class="cartmove">
      <h4 class="title_cart">购物车</h4>
      <div class="cart-product clearfix">
        <div>
          <div class="cart-product-title">
            <div class="td-check">
              <input
                type="checkbox"
                style="background: #336699"
                :class="{ 'check-true': isSelectAll }"
                @click="selectProduct(isSelectAll)"
                :checked="isSelectAll"
                id="checkAll"
              />全选
            </div>
            <div class="td-product">商品</div>
            <div class="td-num">数量</div>
            <div class="td-price">单价(元)</div>
            <div class="td-total">金额(元)</div>
            <div class="td-do">操作</div>
          </div>
          <div>
            <!-- 开始遍历商品 -->
            <div
              class="item_info"
              v-for="(item, index) in productList"
              :key="index"
            >
              <div class="td-check">
                <input
                  type="checkbox"
                  class="check-span"
                  @click="item.select = !item.select"
                  :class="{ 'check-true': item.select }"
                  :checked="item.select"
                />
              </div>
              <div class="td-product">
                <div class="img_item">
                  <img
                    :src="require(`../assets/${item.pro_img}`)"
                    width="98"
                    height="98"
                    alt=""
                  />
                </div>
                <div class="product-info">
                  <h3>{{ item.pro_name }}</h3>
                  <p>商品描述</p>
                </div>
              </div>
              <div class="td-num">
                <div class="product-num">
                  <el-input-number
                    v-model="item.pro_num"
                    @blur="check($event, index)"
                    @input="search($event, index)"
                    :min="1"
                    size="mini"
                  ></el-input-number>
                </div>
              </div>
              <div class="td-price">
                <p class="red-text">￥{{ item.pro_price.toFixed(2) }}</p>
              </div>
              <div class="td-total">
                <p class="red-text">
                  ${{ item.pro_num * item.pro_price.toFixed(2) }}
                </p>
              </div>
              <div class="td-do">
                <el-button
                  type="danger"
                  class="product-delect"
                  @click="deleteOneProduct(index)"
                  >删除</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cart-product-info">
        <a class="delect-product" @click="deleteProduct()">删除所选商品</a>
        <a class="keep-shopping" href="#">继续购物</a>
        <div class="item_price">
          <div class="check-num">
            <span>{{ getTotal.totalNum }}</span
            >件商品总计（不含运费）：
          </div>
          <div class="product-total" style="color:#FFFF66;font-weight=600">
            ￥<span>{{ getTotal.totalPrice }}</span>
          </div>
        </div>
        <div class="button-buy">
          <el-button type="success">去结算</el-button>
        </div>
      </div>
    </div>
    <div v-else class="cart-empty">
      <h1>购物车没有东西哦，快去逛逛吧</h1>
    </div>
  </div>
</template>

<script>
export default {
  name: "Cart",
  data() {
    return {
      productList: [
        {
          pro_name: "产品名称2", //产品名称
          pro_brand: "skc", //品牌名称
          pro_place: "韩国", //产地
          pro_purity: "99.7%", //规格
          pro_min: "215千克", //最小起订量
          pro_depot: "上海仓海仓储", //所在仓库
          pro_num: 3, //数量
          pro_img: "test1.jpg", //图片链接
          pro_price: 800, //单价
        },
        {
          pro_name: "产品名称2", //产品名称
          pro_brand: "skc", //品牌名称
          pro_place: "韩国", //产地
          pro_purity: "99.7%", //规格
          pro_min: "215千克", //最小起订量
          pro_depot: "上海仓海仓储", //所在仓库
          pro_num: 1, //数量
          pro_img: "test2.jpg", //图片链接
          pro_price: 800, //单价
        },
      ],
    };
  },
  computed: {
    isSelectAll: function () {
      //如果productList中每一条数据的select都为true，返回true，否则返回false;
      return this.productList.every(function (val) {
        return val.select;
      });
    },
    getTotal: function () {
      //获取productList中select为true的数据。
      var _proList = this.productList.filter(function (val) {
          return val.select;
        }),
        totalPrice = 0;
      for (var i = 0, len = _proList.length; i < len; i++) {
        //总价累加
        totalPrice += _proList[i].pro_num * _proList[i].pro_price;
      }
      //选择产品的件数就是_proList.length，总价就是totalPrice
      return { totalNum: _proList.length, totalPrice: totalPrice };
    },
  },
  methods: {
    selectProduct: function (_isSelect) {
      //遍历productList，全部取反
      for (var i = 0, len = this.productList.length; i < len; i++) {
        this.productList[i].select = !_isSelect;
      }
    }, //删除已经选中(select=true)的产品
    deleteProduct: function () {
      this.productList = this.productList.filter(function (item) {
        return !item.select;
      });
    },
    //删除单条产品
    deleteOneProduct: function (index) {
      //根据索引删除productList的记录
      this.productList.splice(index, 1);
    },
    search: function (event, index) {
      let flag = new RegExp("^[1-9]([0-9])*$").test(event.target.value);
      if (!flag) {
        this.productList[index].pro_num = "";
      }
    },
    check: function (event, index) {
      if (event.target.value == "") {
        this.productList[index].pro_num = 0;
      }
    },
    //数量增加
    add: function (index) {
      this.productList[index].pro_num++;
    },
    //数量减少
    minus: function (index) {
      if (this.productList[index].pro_num > 0) {
        this.productList[index].pro_num--;
      } else {
        this.productList[index].pro_num = 0;
      }
    },
  },
  mounted: function () {
    //为productList添加select（是否选中）字段，初始值为true
    var _this = this;
    //为productList添加select（是否选中）字段，初始值为true
    this.productList.map(function (item) {
      _this.$set(item, "select", true);
    });
  },
};
</script>

<style scoped>
@charset "utf-8";
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:focus {
  outline: none;
}
html {
  height: 100%;
}
body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-family: "微软雅黑", microsoft yahei;
  color: #333;
  background: #fff;
}
body,
div,
span,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
code,
del,
dfn,
em,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
legend,
caption,
tbody,
tfoot,
thead,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
  padding: 0;
  margin: 0;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  color: #333;
  background-color: transparent;
  text-decoration: none;
  -webkit-touch-callout: none;
}
a:active,
a:hover {
  outline: 0;
}
img {
  border: 0;
  vertical-align: middle;
  -webkit-touch-callout: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
[role="button"]:focus {
  outline: 0;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
  outline: none;
}
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
input[type="text"] {
  -webkit-appearance: none;
}
input[type="checkbox"] {
  -webkit-appearance: checkbox;
}
input[type="radio"] {
  -webkit-appearance: radio;
}
textarea {
  overflow: auto;
  outline: none;
  -webkit-appearance: none;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.page-shopping-cart {
  width: 1200px;
  margin: 50px auto;
  font-size: 14px;
  border: 1px solid #e3e3e3;
  border-top: 2px solid #317ee7;
}
.page-shopping-cart .cart-title {
  color: #317ee7;
  font-size: 16px;
  text-align: left;
  padding-left: 20px;
  line-height: 68px;
}
.page-shopping-cart .red-text {
  color: #e94826;
}
.page-shopping-cart .check-span {
  display: block;
  width: 24px;
  height: 20px;
}
.page-shopping-cart .td-check {
  width: 80px;
}
.page-shopping-cart .td-product {
  width: 460px;
}
.page-shopping-cart .td-num,
.page-shopping-cart .td-price,
.page-shopping-cart .td-total {
  width: 160px;
}
.page-shopping-cart .td-do {
  width: 148px;
}
.page-shopping-cart .cart-product-title {
  text-align: center;
  height: 38px;
  line-height: 38px;
  background: #f7f7f7;
}
.page-shopping-cart .cart-product-title .td-product {
  text-align: center;
  font-size: 14px;
}
.page-shopping-cart .cart-product-title .td-check {
  text-align: left;
}
.page-shopping-cart .cart-product-title .td-check .check-span {
  margin: 9px 6px 0 0;
}
.page-shopping-cart .cart-product {
  text-align: center;
}
.page-shopping-cart .cart-product table {
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.page-shopping-cart .cart-product table th {
  padding: 10px;
}
.page-shopping-cart .cart-product table td {
  padding: 20px 10px;
}
.page-shopping-cart .cart-product table tr {
  border-bottom: 1px dashed #e3e3e3;
}
.page-shopping-cart .cart-product table tr:last-child {
  border-bottom: none;
}
.page-shopping-cart .cart-product table .product-num {
  border: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
}
.page-shopping-cart .cart-product table .product-num .num-do {
  width: 24px;
  height: 28px;
  display: block;
  background: #f7f7f7;
}
.page-shopping-cart .cart-product table .product-num .num-reduce span {
  background: url("../assets/minus.png") no-repeat center;
  display: block;
  width: 24px;
  height: 28px;
}
.page-shopping-cart .cart-product table .product-num .num-add span {
  background: url("../assets/add.png") no-repeat center;
  display: block;
  width: 24px;
  height: 28px;
}
.page-shopping-cart .cart-product table .product-num .num-input {
  width: 42px;
  height: 28px;
  line-height: 28px;
  border: none;
  text-align: center;
}
.page-shopping-cart .cart-product table .td-product {
  text-align: left;
  font-size: 12px;
  line-height: 20px;
}
.page-shopping-cart .cart-product table .td-product img {
  border: 1px solid #e3e3e3;
  margin-right: 10px;
}
.page-shopping-cart .cart-product table .td-product .product-info {
  display: inline-block;
  vertical-align: middle;
}
.page-shopping-cart .cart-product table .td-do {
  font-size: 12px;
}
.page-shopping-cart .cart-product-info {
  height: 50px;
  line-height: 50px;
  background: #f7f7f7;
  padding-left: 20px;
}
.page-shopping-cart .cart-product-info .delect-product {
  color: #666;
}
.page-shopping-cart .cart-product-info .product-total {
  font-size: 14px;
  color: #e94826;
}
.page-shopping-cart .cart-product-info .product-total span {
  font-size: 20px;
}
.page-shopping-cart .cart-product-info .check-num {
  color: #333;
}
.page-shopping-cart .cart-product-info .check-num span {
  color: #e94826;
}
.page-shopping-cart .cart-product-info .keep-shopping {
  color: #666;
  margin-left: 40px;
}
.page-shopping-cart .cart-product-info .btn-buy {
  height: 50px;
  color: #fff;
  font-size: 20px;
  display: block;
  width: 110px;
  background: #ff7700;
  text-align: center;
  margin-left: 30px;
}
.page-shopping-cart .cart-worder {
  padding: 20px;
}
.page-shopping-cart .cart-worder .choose-worder {
  color: #fff;
  display: block;
  background: #39e;
  width: 140px;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  text-align: center;
  margin-right: 20px;
}
.page-shopping-cart .cart-worder .worker-info {
  color: #666;
}
.page-shopping-cart .cart-worder .worker-info img {
  border-radius: 100%;
  margin-right: 10px;
}
.page-shopping-cart .cart-worder .worker-info span {
  color: #000;
}
#cart_index {
  width: 80%;
  box-shadow: 0 0 15px rgb(83, 103, 110);
  background: rgba(71, 142, 175, 0.2);
  border-radius: 15px;
  backdrop-filter: blur(5px);
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #336699;

  display: flex;
  flex-direction: column;
}

/* 加载上浮动画 打关键帧 */
@keyframes cartmoveload {
  0% {
    opacity: 0;
    margin-top: 100px;
  }

  60% {
    opacity: 1;
    margin-top: 50px;
  }

  100% {
    opacity: 1;
    margin-top: 0px;
  }
}

.cartmove {
  animation: cartmoveload 1s linear;
}

.cart-product-info {
  background: #7ba1c5;
  height: 80px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cart-product-info a {
  color: #fff;
}
.delect-product {
  flex: 2;
  display: flex;
  padding-left: 20px;
}
.keep-shopping {
  flex: 2;
}
.item_price {
  flex: 8;
  display: flex;
  align-items: center;
  justify-content: right;
}
.button-buy {
  flex: 2;
  display: flex;
  justify-content: center;
}
.title_cart {
  padding: 20px;
  border-bottom: 1px solid #336699;
  color: #336699;
}
.cart-product {
  border-left: 1px solid #7ba1c5;
  border-right: 1px solid #7ba1c5;
}
.cart-product-title {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 10px;
  color: #336699;
  border-bottom: 1px solid #336699;
}
.product-delect {
  color: #fff;
}
.td-check {
  flex: 2;
}
.td-product {
  flex: 12;
  display: flex;
}
.img_item {
  flex: 3;
}
.product-info {
  flex: 9;
}
.td-num,
.td-price,
.td-total,
.td-do {
  flex: 3;
}
.product-num {
  margin-right: 70px;
}

.item_info {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #7ba1c5;
}

.cart-empty {
  width: 80%;
  box-shadow: 0 0 15px rgb(83, 103, 110);
  background: rgba(71, 142, 175, 0.2);
  border-radius: 15px;
  backdrop-filter: blur(5px);
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #336699;
  padding: 15%;
  display: flex;
  flex-direction: column;
}

.mid {
  height: 100vh;
  width: 100vw;
}

input[type="checkbox"] {
  cursor: pointer;
  position: relative;
  width: 15px;
  height: 15px;
  font-size: 14px;
}
input[type="checkbox"]::after {
  position: absolute;
  top: 0;
  color: #336699;
  width: 15px;
  height: 15px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: " ";
  border-radius: 3px;
}

input[type="checkbox"]:checked::after {
  content: "√";
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  background-color: #336699;
}
</style>
